<template>
  <div class="border-line card">
    <header-title title="非房屋类资产类型占比" @fullScreen="handleFullScreen"></header-title>
    <div class="card-content">
      <echarts-view :options="option" height="260px"></echarts-view>
    </div>
  </div>
</template>

<script>
/**
 *Parser
 *@Author
 *@Version
 *@property
 *@event
 */
import headerTitle from './headerTitle.vue'
import { echartsView } from '@/components'
import { getFLTJ } from '@/api/datacharts'
export default {
  components: {
    headerTitle,
    echartsView
  },
  created () {
    this.fetchData()
  },
  data () {
    return {
      option: {}
    }
  },
  methods: {
    fetchData () {
      getFLTJ({
        Mode: 'FFW'
      }).then((res) => {
        const data = res
        const arrName = getArrayValue(data, 'name')
        const arrValue = getArrayValue(data, 'value')
        // eslint-disable-next-line no-eval
        const sumValue = eval(arrValue.join('+'))
        // const objData = array2obj(data, 'name')
        const optionData = getData(data)
        function getArrayValue (array, key) {
          // eslint-disable-next-line no-redeclare
          var key = key || 'value'
          var res = []
          if (array) {
            array.forEach(function (t) {
              res.push(t[key])
            })
          }
          return res
        }

        // function array2obj (array, key) {
        //   var resObj = {}
        //   for (var i = 0; i < array.length; i++) {
        //     resObj[array[i][key]] = array[i]
        //   }
        //   return resObj
        // }

        function getData (data) {
          var res = {
            series: [],
            yAxis: []
          }
          for (let i = 0; i < data.length; i++) {
            res.series.push({
              name: '非房屋类资产类型占比',
              type: 'pie',
              clockWise: false, // 顺时加载
              hoverAnimation: false, // 鼠标移入变大
              radius: [85 - i * 15 + '%', 77 - i * 15 + '%'],
              center: ['30%', '55%'],
              label: {
                show: false
              },
              itemStyle: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                borderWidth: 0
              },
              data: [
                {
                  value: data[i].value,
                  name: data[i].name
                },
                {
                  value: sumValue - data[i].value,
                  name: '',
                  itemStyle: {
                    color: 'rgba(0,0,0,0)',
                    borderWidth: 0
                  },
                  tooltip: {
                    show: false
                  },
                  hoverAnimation: false
                }
              ]
            })
            res.series.push({
              name: '',
              type: 'pie',
              silent: true,
              z: 1,
              clockWise: false, // 顺时加载
              hoverAnimation: false, // 鼠标移入变大
              radius: [85 - i * 15 + '%', 77 - i * 15 + '%'],
              center: ['30%', '55%'],
              label: {
                show: false
              },
              itemStyle: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                borderWidth: 0
              },
              data: [
                {
                  value: 7.5,
                  itemStyle: {
                    color: 'rgba(40, 43, 78, 1)',
                    borderWidth: 0
                  },
                  tooltip: {
                    show: false
                  },
                  hoverAnimation: false
                },
                {
                  value: 2.5,
                  name: '',
                  itemStyle: {
                    color: 'rgba(0,0,0,0)',
                    borderWidth: 0
                  },
                  tooltip: {
                    show: false
                  },
                  hoverAnimation: false
                }
              ]
            })
            res.yAxis.push(((data[i].value / sumValue) * 100).toFixed(2) + '%')
          }
          return res
        }
        this.option = {
          legend: {
            show: true,
            top: 'center',
            left: '70%',
            data: arrName,
            // formatter: function (name) {
            //   return '{title|' + name + '}\n{value|' + objData[name].value + '元}'
            // },
            textStyle: {
              color: '#fff',
              rich: {
                title: {
                  fontSize: 10,
                  lineHeight: 10,
                  color: '#fff'
                },
                value: {
                  fontSize: 14,
                  lineHeight: 18,
                  color: '#fff'
                }
              }
            }
          },
          tooltip: {
            show: true,
            trigger: 'item',
            formatter: '{a}<br>{b}:{c}({d}%)'
          },
          color: [
            'rgba(29, 249, 252, 1)',
            'rgba(30, 103, 242, 1)',
            'rgba(110, 105, 249, 1)',
            'rgba(0, 183, 238, 1)',
            'rgba(202, 201, 201, 1)'
          ],
          grid: {
            top: '10%',
            bottom: '58%',
            left: '30%',
            containLabel: false
          },
          yAxis: [
            {
              type: 'category',
              inverse: true,
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                interval: 0,
                inside: true,
                textStyle: {
                  color: '#fff',
                  fontSize: 10
                },
                show: true
              },
              splitLine: {
                // 网格线
                show: false
              },
              data: optionData.yAxis
            }
          ],
          xAxis: [
            {
              show: false
            }
          ],
          series: optionData.series
        }
      })
    },
    handleFullScreen () {
      this.$emit('fullScreen')
    }
  }
}
</script>
<style lang="less" scoped>
.card {
  height: 346px;
  &-content {
    margin-top: 20px;
  }
}
</style>
